import React, { useState, useEffect } from 'react';
import { 
  Layout, 
  Breadcrumb, 
  Button, 
  message,
  Spin,
  Tabs
} from 'antd';
import { 
  ArrowLeftOutlined,
  HomeOutlined,
  UserOutlined,
  PictureOutlined,
  InfoCircleOutlined
} from '@ant-design/icons';
import { useParams, useNavigate } from 'react-router-dom';
import ArtistProfile from '../../components/ArtistProfile';
import ArtworkGallery from '../../components/ArtworkGallery';
import cloudbase from '../../utils/cloudbase';
import styles from './index.module.less';

const { Content } = Layout;
const { TabPane } = Tabs;

const ArtistProfilePage = () => {
  const { id } = useParams();
  const navigate = useNavigate();
  const [loading, setLoading] = useState(true);
  const [artist, setArtist] = useState(null);
  const [activeTab, setActiveTab] = useState('works');

  // 加载艺术家信息
  const loadArtistInfo = async () => {
    try {
      setLoading(true);
      const result = await cloudbase.callFunction('getArtistProfile', { artistId: id });
      
      if (result.code === 0) {
        setArtist(result.data.profile);
      } else {
        message.error('艺术家不存在或已被删除');
        navigate('/');
      }
    } catch (error) {
      console.error('加载艺术家信息失败:', error);
      message.error('加载艺术家信息失败');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    if (id) {
      loadArtistInfo();
    }
  }, [id]);

  // 返回上一页
  const handleBack = () => {
    navigate(-1);
  };

  // 处理标签页切换
  const handleTabChange = (key) => {
    setActiveTab(key);
  };

  return (
    <Layout className={styles.layout}>
      <Content className={styles.content}>
        <div className={styles.header}>
          <Breadcrumb className={styles.breadcrumb}>
            <Breadcrumb.Item href="/">
              <HomeOutlined /> 首页
            </Breadcrumb.Item>
            <Breadcrumb.Item href="/artists">
              <UserOutlined /> 艺术家
            </Breadcrumb.Item>
            {artist && (
              <Breadcrumb.Item>{artist.name}</Breadcrumb.Item>
            )}
          </Breadcrumb>
          <Button 
            icon={<ArrowLeftOutlined />} 
            onClick={handleBack}
            className={styles.backButton}
          >
            返回
          </Button>
        </div>

        <Spin spinning={loading} tip="加载中..." className={styles.spinner}>
          {/* 艺术家基本信息 */}
          <ArtistProfile artistId={id} />
          
          {/* 标签页内容 */}
          <div className={styles.tabsContainer}>
            <Tabs activeKey={activeTab} onChange={handleTabChange}>
              <TabPane 
                tab={
                  <span>
                    <PictureOutlined />
                    作品集
                  </span>
                } 
                key="works"
              >
                <ArtworkGallery artist={id} />
              </TabPane>
              <TabPane 
                tab={
                  <span>
                    <InfoCircleOutlined />
                    关于艺术家
                  </span>
                } 
                key="about"
              >
                {artist && (
                  <div className={styles.aboutSection}>
                    <h2>艺术家简介</h2>
                    <p className={styles.biography}>{artist.bio}</p>
                    
                    {artist.education && (
                      <>
                        <h3>教育背景</h3>
                        <p className={styles.education}>{artist.education}</p>
                      </>
                    )}
                    
                    {artist.exhibitions && (
                      <>
                        <h3>展览经历</h3>
                        <p className={styles.exhibitions}>{artist.exhibitions}</p>
                      </>
                    )}
                    
                    {artist.awards && (
                      <>
                        <h3>获奖情况</h3>
                        <p className={styles.awards}>{artist.awards}</p>
                      </>
                    )}
                  </div>
                )}
              </TabPane>
            </Tabs>
          </div>
        </Spin>
      </Content>
    </Layout>
  );
};

export default ArtistProfilePage;